<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: cadetblue;
    }
    img{
      width: 100px;
      height: 100px;
      position: absolute;
    }
    .rotate{
      transform: rotateY(180deg)
    }
  </style>

</head>
<body>
  键盘事件案例
  <img src="xn.png" alt="">
  <script>
    var img = document.querySelector('img');
    var num = 10;
    var start_x = 0;
    var start_y = 0;
    document.onkeydown = function(e){
     if(e.keyCode == 38){
      start_y = start_y - num;
     }else if(e.keyCode == 40){
      start_y = start_y + num;
     }else if(e.keyCode == 37){
      start_x = start_x - num;
      img.className = 'rotate';
     }else if(e.keyCode == 39){
      start_x = start_x + num;
      img.className = ''
     }else{
       alert('哥们必须按箭头键的')
     }

     img.style.left = start_x+'px';
     img.style.top = start_y + 'px';  
    }
  </script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color:cornflowerblue;
    }
    img{
      width: 100px;
      height: 100px;
      position: absolute;
    }
    .rotate{
      transform: rotateY(180deg)
    }
  </style>
</head>
<body>
  <!-- 键盘事件 愤怒的小鸟 -->
  <img src="xn.png" alt="">
  <script>
    var img = document.querySelector('img');
    var img_currentx = 0;
    var img_currenty = 0;
    var step = 10;
    document.addEventListener('keydown',function(e){
      var code = e.keyCode;
      if(code == 38){
        img_currenty -= step;
        // img_currenty = img_currenty - step;
      }else if(code == 40){
        img_currenty += step;
        // img_currenty = img_currenty + step;
      }else if(code == 37){
        img_currentx -= step;
        // img_currentx = img_currentx - step;
        img.className = 'rotate';
      }else if(code == 39){
        img_currentx += step;
        // img_currentx = img_currentx + step;
        img.className = '';
      }else{
        alert('哥们必须按箭头键')
      }
      img.style.left = img_currentx + 'px';
      img.style.top = img_currenty + 'px';
    },false)
  </script>

  <script>
    var img = document.querySelector('img');
    var step = 10;
    var img_x = 0;
    var img_y = 0; 
    document.onkeydown = function(e){
      var code = e.keyCode;
      switch(code){
        case 38:
        img_y = img_y - step;
        break;

        case 40:
        img_y = img_y + step;
        break;

        case 37:
        img_x = img_x - step;
        img.className = 'rotate';
        break;

        case 39:
        img_x = img_x + step;
        img.className = '';
        break;

        default:
          alert('哥们必须使用箭头键');
        break;
      }
      img.style.left = img_x + 'px';
      img.style.top = img_y + 'px';
    }
  </script>
</body>
</html>